<template>
  <div class="login-main animate__animated animate__bounceInRight">
        <van-cell-group inset>
          <van-field
           v-model="formQuery.password"
            type="password"
            left-icon="shield-o"
            placeholder="请输入密码"
            name="password"
            />
            <van-field
              v-model="repassword"
              type="password"
              left-icon="shield-o"
              placeholder="请再次填写密码"
              name="password"
      />
        </van-cell-group>
        <van-button type="primary" block class="login-button" @click="replaceSubmit()">确认修改</van-button>
      </div>
  </template>
<script setup>
import { showSuccessToast, showFailToast } from 'vant';
import { ref, defineEmits, onMounted } from 'vue'
import { replacePasswordService } from '@/api/Login' 
import { get } from 'vant/lib/utils';

  // 表单数据
  const formQuery = ref({
    email: localStorage.getItem('email'),
    password: ''
  })
  const userid = localStorage.getItem('userid');
  const repassword = ref('')
  const skip = defineEmits(['skipto'])
  const validator = (val) => {
    return '不合法'
  }
  
  /**
   * 页面切换
   * @param newpage 
   */
  const skipto = (newpage) => {
    skip('skipto', newpage)
  }

  /**
   * 表单验证
   */
  const formtest = () => {
    if (formQuery.email === '' || formQuery.password === '' || repassword === '') {
      showFailToast('请填写完整信息');
      return false;
    } else if (formQuery.value.password !== repassword.value) {
      showFailToast('两次密码不一致');
      return false;
    } else {
      return true;
    }
  }

  /**
   *  修改提交
   */
 const replaceSubmit = () => {
  if (formtest()) {
    replacePasswordService(formQuery.value,userid).then((res) => { 
        localStorage.removeItem('userid');
        localStorage.removeItem('email');
        setTimeout(() => { 
          skipto('login');
        }, 1000);
    });
  } 
}
  </script>
  <style lang="scss" scoped>
  .login {
    background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 120px;
      .title {
        margin-top: 70px;
        font-size: 22px;
        letter-spacing: 2px;
        color: #fff;
      }
      .login-main {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 20px;
        width: 90%;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        border-radius: 24px;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        :deep(.van-field__left-icon) {
          color: #72bddb;
        }
        :deep(.login-button) {
          background: #72bddb;
          margin-top: 20px;
          width: 70vw;
          border-radius: 15px;
          border: none;
        }
        :deep(.van-cell-group){
          width: 80vw;
        }
        .line-box {
            width: 100%;
            display: flex;
            align-items: center;
            margin: 20px 0px;
  
            .line {
              flex: 1;
              height: 2px;
              background: rgba(0, 0, 0, 0.1);
            }
  
            .line-text {
              padding: 0 10px;
              color: #999;
              font-size: 14px
            }
          }
  
          .footer {
            font-size: 14px;
            color: #999;
  
            .register {
              color: #72bddb;
            }
          }
      }
  
  }
  
  
  ::v-deep.van-cell-group {
    background-color: transparent;
  }
  ::v-deep.van-cell {
    background-color:transparent;
  }
  .forgetButton {
    text-align: right;
    width: 100%;
    color: #87CEEB;
    font-size: 12px;
    margin-top: 15px;
  }
  </style>